<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item label="用户名称">
                    <el-input placeholder="搜索条件" v-model="searchInfo.username" clearable></el-input>
                </el-form-item>
                <el-form-item label="IP地址">
                    <el-input placeholder="搜索条件" v-model="searchInfo.ipaddr" clearable></el-input>
                </el-form-item>
                <el-form-item label="结果状态码" >
                    <el-select v-model="searchInfo.status" clearable placeholder="请选择结果状态码">
                        <el-option
                                v-for="dict in statusOptions"
                                :key="dict.item_value"
                                :label="dict.item_name"
                                :value="dict.item_value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleQuery"  icon="el-icon-search" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item>
                    <el-button @click="deleteBatchLoginLogs" icon="el-icon-delete" :disabled="multiple" type="danger">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="编号" width="55" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column label="用户名称" width="140">
                <template slot-scope="scope">
                    <div>{{scope.row.username}}({{scope.row.nick_name}})</div>
                </template>
            </el-table-column>
            <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
            <el-table-column label="登录地点" align="center" prop="loginLocation" />
            <el-table-column label="浏览器" align="center" prop="browser"  min-width="140"/>
            <el-table-column label="操作系统" align="center" prop="os" />
            <el-table-column label="登录状态" >
                <template slot-scope="scope">{{scope.row.status|formatString}}</template>
            </el-table-column>
            <el-table-column label="操作信息" width="90" align="center" prop="msg" />
            <el-table-column label="登录日期" align="center" width="180">
               <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="deleteLoginLogs(scope.row)" icon="el-icon-delete" size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
    </div>
</template>

<script>
    import {
        deleteLoginLogs,
        getLoginLogsList,
        deleteLoginLogsByIds
    } from '@/api/sysLoginLogs' //  此处请自行替换地址
    import { formatTimeToStr } from '@/utils/date'
    import infoList from '@/mixins/infoList'

    export default {
        name: 'SysLoginLogs',
        mixins: [infoList],
        data() {
            return {
                listApi: getLoginLogsList,
                dialogFormVisible: false,
                visible: false,
                type: '',
                // 非多个禁用
                multiple: true,
                multipleSelection: [],
                statusOptions: [],
                //搜索
                searchInfo: {
                    username: undefined,
                    ipaddr: undefined,
                    status: undefined
                },
            }
        },
        filters: {
            formatDate: function(time) {
                if (time != null && time != '') {
                    var date = new Date(time)
                    return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
                } else {
                    return ''
                }
            },
            formatString: function(bool) {
                if (bool != null) {
                    return bool ? "正常" :"关闭";
                } else {
                    return "";
                }
            },
            formatBoolean: function(s) {
                if (s == "1" ) {
                    return true
                } else {
                    return false;
                }
            }
        },
        methods: {
            //搜索方法
            handleQuery() {
                if (this.searchInfo.status==""){
                    this.searchInfo.status=null
                }
                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.multiple = !val.length
            },
            //批量数据删除
            deleteBatchLoginLogs() {
                if(this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'error',
                        message: '请先选择要删除的项！'
                    })
                    return false
                }
                this.$confirm("此操作将永久删除选择数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        const ids = []
                        this.multipleSelection &&
                        this.multipleSelection.map(item => {
                            ids.push(item.ID)
                        });
                        const res = await deleteLoginLogsByIds({ ids });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            //单条数据删除
            deleteLoginLogs(row) {
                this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(async () => {
                        const res = await deleteLoginLogs({ ID: row.ID });
                        if (res.code == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            await this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },
            fmtBody(value){
                try{
                    return JSON.parse(value)
                }catch (err){
                    return  value
                }
            }
        },
        async created() {
            await this.getTableData()
            this.statusOptions = this.getDicItemList('sys_common_status');
        }
    }
</script>

<style lang="scss">
    .table-expand {
        padding-left: 60px;
        font-size: 0;
        label {
            width: 90px;
            color: #99a9bf;
            .el-form-item {
                margin-right: 0;
                margin-bottom: 0;
                width: 50%;
            }
        }
    }
    .popover-box {
        background: #112435;
        color: #f08047;
        height: 600px;
        width: 420px;
        overflow: auto;
    }
    .popover-box::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
</style>
